import React, { Component } from 'react';
import { View, Text, Image, TouchableHighlight, StyleSheet } from 'react-native';
import PropTypes from "prop-types";

import Color from '../../config/theme/standard/color.js';
import font from '../../config/theme/standard/fonts.js';
import Label from '../label/index.js';



export default class Tag extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isSelected: props.isSelected,
            isShowBtn: true
        };
        this.clickHandler = this.clickHandler.bind(this);
        this.deleteClick = this.deleteClick.bind(this);
    };
    //按钮点击事件
    clickHandler(){
        let { isSelected } = this.state;
        if(!this.props.disabled){
            if(!isSelected){
                if (typeof this.props.eventClick === "function") {
                    this.props.eventClick();
                }
            }
            this.setState({isSelected: !isSelected})
        }
    };
    //删除
    deleteClick(){
        if (typeof this.props.deleteEvent === "function") {
            this.props.deleteEvent();
        }
        this.setState({isShowBtn:false})
    };
    render() {
        let {type,size,theme,text,hasDeleteBtn,radiusStyles,disabled,hasRadius}=this.props;
        let { isSelected }=this.state;

        const container = [styles.container];//外层容器样式
        const textContainerStyle = [styles.textContainer];//文字容器样式
        const textStyle = [styles.text];//文字样式
        const deleteStyle = [styles.delete];//文字样式

        //如果是选中状态
        if (isSelected) {
            if (type == 'primary') {
                textContainerStyle.push({
                    backgroundColor: theme ? theme : Color.tag.selectBackground,
                    borderColor: theme ? theme : Color.tag.border,
                });
                deleteStyle.push({borderColor: theme ? theme : Color.tag.deleteBorder});
                textStyle.push({color: Color.tag.primaryText});
            } else if (type == 'linear') {
                textContainerStyle.push({borderColor: theme ? theme : Color.tag.border});
                textStyle.push({color: theme ? theme : Color.tag.text});
                deleteStyle.push({
                    backgroundColor: theme ? theme : Color.tag.background,
                    borderColor: theme ? theme : Color.tag.border,
                });
            }
        }

        //如果是禁用状态
        if (disabled) {
            if (type == 'primary') {
                textContainerStyle.push({
                    backgroundColor: Color.tag.disableBackground,
                    borderColor: Color.tag.disableBorder,
                });
                textStyle.push({color: Color.tag.disableText});
            } else if (type == 'linear') {
                textContainerStyle.push({borderColor: Color.tag.disableBorder});
                textStyle.push({color: Color.tag.disableText});
            }
        }

        //尺寸判断
        if (size == 'small') {
            textContainerStyle.push({height: 20, borderRadius: 2});
            textStyle.push({fontSize: font.tag.smallFontSize,
                //  paddingHorizontal: 10
            })
            deleteStyle.push({top: -8});
        }
        //圆角判断
        if (hasRadius) {
            textContainerStyle.push({borderRadius: 24});
        }
        let icon=null;
        if(type == 'primary'){
           icon=require('../../assets/icon_tag_badge_clear_white.png')
        }else{
            icon=require('../../assets/icon_tag_badge_clear_red.png')
        };
        let deleteContent = (isSelected ?
            <TouchableHighlight underlayColor={'transparent'} style={deleteStyle} onPress={this.deleteClick}>
                <Image style={styles.image} source={icon}/>
            </TouchableHighlight> :  null
        );
        let content = (this.state.isShowBtn ?
            <View style={container}>
                <TouchableHighlight underlayColor={'transparent'} style={textContainerStyle} disabled={disabled} onPress={this.clickHandler}>
                    <Label text={text} labelStyle={textStyle}/>
                </TouchableHighlight>
                { hasDeleteBtn ? deleteContent : null}
            </View> : null
        );
        return(
            <View>
                {content}
            </View>
        )

    }
}
Tag.propTypes = {
    type: PropTypes.oneOf(['primary', 'linear']),
    size: PropTypes.oneOf(['small', 'normal']),
    theme: PropTypes.string,
    text: PropTypes.string,
    disabled: PropTypes.bool,
    hasDeleteBtn: PropTypes.bool,
    hasRadius: PropTypes.bool,
    isSelected:PropTypes.bool,
    eventClick: PropTypes.func,
};
Tag.defaultProps = {
    type: 'primary',
    size: 'normal',
    disabled: false,
    hasDeleteBtn: false,
    hasRadius: false,
    isSelected: false
};
const styles = StyleSheet.create({
    container:{
        flexDirection: 'row',
        justifyContent:'center',
        alignItems: 'center'
    },
    textContainer: {
        flexDirection: 'column',
        justifyContent:'center',
        alignItems: 'center',
        height: 24,
        backgroundColor: Color.tag.background,
        borderWidth: 1,
        borderColor: Color.tag.border,
        borderRadius: 2,
        paddingLeft:4,
        paddingRight:4
    },
    text:{
        color: Color.tag.text,
        fontSize: font.tag.textFontSize
    },
    delete: {
        justifyContent: 'center',
        alignItems: 'center',
        width: 16,
        height: 16,
        backgroundColor: Color.white,
        borderRadius: 14,
        borderWidth: 1,
        position: 'relative',
        top: -10,
        right: 8,
    },
    image: {
        width: 16,
        height: 16,
    }
});